<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>作用域插槽</title>
    <script src="../vue.js"></script>
    <script src="../vue-router.js"></script>
</head>

<body>
    <div id="app">
        <div class="parent">
            <!--在父级中，具有特殊属性 scope 的 <template> 元素，表示它是作用域插槽的模板。scope 的值对应一个临时变量名(这个变量名可以是任意的名，比如什么aaa。bbb。ccc都可以)，此变量接收从子组件中传递的 prop 对象：-->
            <first>
                <template scope="aaa">
                    <span>我是来自父组件的</span><br>
                    <span>{{aaa.text}}</span>
                </template>
            </first>
        </div>
    </div>
    <script>
        //在子组件中，只需将数据传递到插槽，就像你将 prop 传递给组件一样：
        Vue.component('first',{
            template:'<div class="child"><slot text="我是来自子组件的"></slot></div>'

        })
        var app = new Vue({
            el:'#app',
            data (){
                return {
                    price:0
                }
            }
        })
    </script>
</body>

</html>